A DHTML Primer

DHTML is very similar to HTML.  In fact, all that DHTML does is utilize an attribute within a standard HTML tag to identify parts (objects) within the document.  This new attribute is named ID.  

For example, let’s declare a section of text using the <SPAN> tag.  By giving it an ID (giving it a name), we can control the contents of the text with the <SPAN> and </SPAN> tags by using JavaScript.

<HTML>
. . .
<SPAN ID=”Text1”></SPAN>
. . .
</HTML>

The simple addition of the ID attribute tells the client-side scripting engine (remember, the default is JavaScript, or to be more accurate, Jscript), that the Text1 object can be manipulated directly.  JavaScript is an object based language, meaning it understands how to work with objects and their respective properties and methods.  The scripting engine assigned a set of default DHTML properties and methods to this new object.  Using the name that we gave it (in this case “Text1”), we can directly manipulate the content within the <SPAN> and </SPAN> tags.

<SCRIPT LANGUAGE=”JavaScript”>

function OnMouse1()
{
	Text1.innerText = “This is some text”;
}

</SCRIPT>

A couple things to note about this code.  The first is the innerText property that we are using.  This property is referenced through the Text1 object (in effect, the <SPAN> tag named “Text1”).  This is a stock property that is given to all DHTML objects (tags with ID attributes).  This property can be evaluated or assigned, as is the case in this example.  This is the second point.  We have assigned some text to the object.  Wherever the <SPAN> that we created is physically located within the document (i.e. rendered within the browser), the text “This is some text” appears.  You can change this value again and again and it will update the visual representation of the document without making a round-trip to the server. 
Another useful property to be aware of is the innerHTML property.  Like innerText, it is a stock property and can be used to change the physical representation of the page.  The difference is that if you use innerHTML, the browser will use any HTML markup tags that specify within the text that you assign.  

For example, let’s say that you want to bold the word “text” in our previous example.  We could use the <B> and </B> tags within our assignment to tell the browser to bold the text appropriately.  Second, we would assign the text to the innerHTML property instead of innerText.  

<SCRIPT LANGUAGE=”JavaScript”>

function OnMouse1()
{
	Text1.innerHTML = “This is some <B>text</B>”;
}

</SCRIPT>

This is enough DHTML to get us started.  DHTML is very sophisticated and has a number of advanced capabilities and features that we have not discussed.  For example, using DHTML you can directly manipulate images, change their sizes and source and manipulate tables and their contents, just to name a few.  

I highly encourage you to look into DHTML and use it within your web sites provided of course that you are targeting the IE browser.

Tip:	Using DHTML, you can create applications that are more in line with 
	the Windows standard interface model.